<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
                <a><cite>合同业务</cite></a>
                <a href="">合同列表</a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  placeholder="开始日" name="startd" id="startd">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" placeholder="请输入项目名" name="projectName" id="projectName" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" placeholder="请输入创建人" name="creater" id="creater" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <select name="typeId">
                                        <option value="">合同状态</option>
                                        <option value="">所有合同</option>
                                        <option value="3">已确认</option>
                                        <option value="2">已转发未确认</option>
                                        <option value="1">未转发</option>
                                    </select>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table id="demo" class="layui-table layui-form" lay-filter="demo"></table></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/html" id="show">
      <a title="详情"  lay-event="show_details" href="javascript:;">详情<i class="layui-icon">&#xe642;</i></a>
    </script>
   <script>
        layui.use(['laydate'], function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#startd' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
              elem: '#end' //指定元素
            });
        });
        layui.use(['table','form'], function(){
            var table = layui.table;
            table.render({
              elem: '#demo'
              ,id: 'tableList'
              ,method: 'post'
              ,url: '/ht/getOnePageInfo'
              ,cols: [[ //标题栏
                {field: 'level1SystemId', title: '合同ID'}
                ,{field: 'projectName', title: '项目名称'}
                ,{field: 'customerName', title: '创建人', sort: true,}
                ,{field: 'createDate', title: '创建时间', sort: true}
                ,{field: 'state', title: '转发情况', sort: true,
                    templet:function(data) {
                      var stateChar = data.state.charAt(data.state.length - 1)
                      if(stateChar == '3')
                        return '<span class="layui-btn layui-btn-normal layui-btn-mini">已确认</span>'
                      else if(stateChar == '2')
                        return '<span class="layui-btn layui-btn layui-btn-mini">已转发未确认</span>'
                      else
                        return '<span class="layui-btn layui-btn-danger layui-btn-mini">未转发</span>'
                    }
                  }
                ,{fixed: 'right', title:'操作', toolbar: '#show'}
              ]]
              ,parseData: function(res){ //res 即为原始返回的数据
                var dataT = res.list;
                for(let i = 0 ; i < dataT.length; i++) {
                   var temp = dataT[i].createDate.substring(0,10);
                   dataT[i].createDate = temp;
                }
                return {
                   "code": 0,
                   "limit": res.pageSize,
                   "count": res.count, //解析数据长度
                   "data": dataT //解析数据列表
                };
              }
              ,skin: 'row' //表格风格
              ,even: true
              ,page: true
              ,limit: 6
              ,limits: [6,10,20]
              ,done : function(res, curr, count){
                  table_data=res.data;
                  layer.closeAll('loading');
               }
            });

            //监听行工具事件
            table.on('tool(demo)', function(obj) {
              var data = obj.data;
              console.log(obj)
              if(obj.event === 'show_details') {
                if(obj.data.msg == 1)
                  xadmin.open('详情','./table-show.html?status=001&id='+obj.data.level1SystemId,1200,800);
                else if(obj.data.msg == 2)
                  xadmin.open('详情','./table-show.html?status=002&id='+obj.data.level1SystemId,1200,800);
                else
                  xadmin.open('详情','./table-show.html?status=003&id='+obj.data.level1SystemId,1200,800);
              }
            });

            var form = layui.form;
            form.on('submit(search)', function(data){
                layer.load();
                table.reload('tableList', {
                    method: 'get'
                    ,page: {
                      curr: 1 //重新从第 1 页开始
                    }
                    ,where:{
                      'projectName' : data.field.projectName,
                      'customerName' : data.field.creater,
                      'start' : data.field.startd,
                      'end' : data.field.end,
                        'state': data.field.typeId == "" ? null : data.field.typeId,
                    }
                 }); 
                 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
             });
          });
    </script>

</html>